<template>
  <a-config-provider :locale="zhCN">
    <div>
      <div v-if="userRole === 'admin'" class="app"><h1>admin</h1></div>
      <div v-else-if="userRole === 'user'" class="app">
        <a-layout>
          <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible style="background-color: white">
            <div class="logo" style="display: flex;align-items: center;height:64px">
              <div style="display: flex;align-items: center;justify-content: start;padding-left: 20px">
                <img alt="logo" height="35"
                     src="https://tse1-mm.cn.bing.net/th/id/OIP-C.B3hlNY69dQz8BlQ3Ka3c6AHaJ0?rs=1&pid=ImgDetMain"
                     width="auto">
                <h1 v-show="!collapsed" style="margin-left: 10px">工作台</h1>
              </div>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="handleMenuClick">
              <a-menu-item key="hotList">
                <FireOutlined/>
                <span>每日热榜</span>
              </a-menu-item>
              <a-menu-item key="todo">
                <WalletOutlined/>
                <span>每日待办</span>
              </a-menu-item>
              <a-menu-item key="toolbox">
                <AppstoreOutlined/>
                <span>工具箱</span>
              </a-menu-item>
              <a-menu-item key="codeGenerate">
                <ConsoleSqlOutlined/>
                <span>代码生成</span>
              </a-menu-item>
            </a-menu>
            <div class="collapse-icon" @click="() => (collapsed = !collapsed)">
              <RightCircleOutlined v-if="collapsed"
                                   style="font-size: 25px; color: #ccc; position: absolute; top: 4%; right: -12px; transform: translateY(-50%);"/>
              <LeftCircleOutlined v-else
                                  style="font-size: 25px; color: #ccc; position: absolute; top: 4%; right: -12px; transform: translateY(-50%);"/>
            </div>


            <div style="position: absolute; bottom: 20px; margin-left: 10px;width: 100%; text-align: start;">
              <a-dropdown placement="topRight">
                <a class="ant-dropdown-link" @click.prevent>
                  <a-avatar
                      :src="`https://tse3-mm.cn.bing.net/th/id/OIP-C.9wY6X5X4g7r0sX0X7X9w6wHaHa?w=185&h=185&c=7&r=0&o=5&dpr=1.25&pid=1.7`"
                      size="large"/>
                  <span v-if="!collapsed" style="margin-left: 10px">admin</span>
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1">
                      <a href="javascript:">个人中心</a>
                    </a-menu-item>
                    <a-menu-item key="2">
                      <a href="javascript:">退出登录</a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>

          </a-layout-sider>
          <a-layout>
            <a-layout-content
                :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
                style="  overflow-y: auto; /* 启用垂直滚动 */"
            >
              <RouterView/>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
  </a-config-provider>
</template>
<script lang="ts" setup>
import zhCN from "ant-design-vue/es/locale/zh_CN"; // 引入中文语言包
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from 'vue-router'; // 添加路由引入
import {
  AppstoreOutlined,
  ConsoleSqlOutlined,
  FireOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  WalletOutlined
} from '@ant-design/icons-vue';

const userRole = ref('user');

//user的侧边栏
const selectedKeys = ref<string[]>([]);
const collapsed = ref<boolean>(false);

const router = useRouter(); // 创建路由实例
const route = useRoute(); // 创建路由实例

const handleMenuClick = (e: any) => {
  // 根据点击的菜单项key进行路由跳转
  router.push({name: e.key});
};

onMounted(() => {
  // 根据当前路由名称设置选中的菜单项
  updateSelectedKeys();
});

// 监听路由变化，更新选中的菜单项
watch(
    () => route.name,
    (newRouteName) => {
      if (newRouteName) {
        selectedKeys.value = [newRouteName as string];
      }
    }
);

const updateSelectedKeys = () => {
  const currentRouteName = route.name;
  if (currentRouteName) {
    selectedKeys.value = [currentRouteName as string];
  }
};
</script>
<style scoped>
.app {
  flex: 1;
  border: 2px solid red;
  box-sizing: border-box; /* 确保边框不会增加额外宽度 */
  display: flex;
  width: 100%;
  height: 800px;

}
</style>

